<template>
  <div id="app">
    <div class="outbox">
      <nav>
        <div class="box">
          <img src="./assets/common/15.png" alt="" class="img-logo">
          <p class="say-font">嘉兴集团</p>
          <router-link to="/">
            <div>主页</div>
          </router-link>
          <router-link to="/economy">房产经纪</router-link>
          <router-link to="/property">地产分类</router-link>
          <router-link to="/about">关于我们</router-link>
        </div>
        <el-input  placeholder="请输入内容" v-model="input" @input="changeFn" debounce>
          <el-button slot="append" icon="el-icon-search" @click="homeFn"></el-button>
               
        </el-input>
         <div class="search">
          <ul>
        <li
          v-for="item in homeList"
          :key="item.id"
          v-html="
              `<span style=color:red;>${item.title}</span>`
          "
          @click="itemIn(item.title)"
        ></li>
      </ul>
    </div>
      </nav>
      <router-view />
      <FooterBox></FooterBox>
    </div>
  </div>
</template>
<script>
import {getPropertyList} from '@/api/property'
export default {
  data(){
    return{
      input:'',
      homeList:''
    }
  },
mounted() {
    /* 这里是给整个页面添加了一个鼠标移动的监听事件 e为事件对象*/
    document.addEventListener(`mousemove`, this.mouseMove)
  },
  beforeDestroy() {
    document.removeEventListener(`mousemove`, this.mouseMove)
  },
  methods: {
    mouseMove(e) {
      /* 这里获取元素节点*/
      const oPanel = document.getElementById('app')
      const oSpan = document.createElement(`span`)
      /* 浏览器兼容*/
      e = e || window.Event
      // let x = e.clientX;
      // let y = e.clientY;
      /* 获取相关参数*/
      oSpan.style.left = e.clientX + `px`
      oSpan.style.top = e.clientY + `px`
      /* 设定随机数存储在size中*/
      const size = Math.random() * 20
      /* 给节点赋值参数数值*/
      oSpan.style.width = 5 + size + `px`
      oSpan.style.height = 5 + size + `px`
      /* 在body中添加span标签*/
      oPanel.appendChild(oSpan)
      /* 设置定时器 间隔时间为2000毫秒*/
      setTimeout(() => {
        /* 清除ospan节点*/
        oSpan.remove()
      }, 1000)
    },
    homeFn(){
      this.$router.push({
        path:'/HomeLest',
        query:{
          name:this.input
        }
      })
      console.log(this.input);
    },
    changeFn(){
      if(!this.input){
        this.homeList=''
        return
      }
      this.gethomeList()
    },
   async gethomeList(){
    const res= await getPropertyList({
      title_contains:this.input
    })
    console.log(res);
    this.homeList= res.data
    },
    itemIn(item){
      this.input=item
     this.homeList=""
    }
  }
}
</script>


<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
#app {
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: start;
}
.outbox {
  height: calc(100vh);
  padding: 90px 0 0 0;
  // overflow: auto;
  position: relative;
  .img-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 10vw;
    top: 15px;
  }
  p {
    font-size: 30  px;
    position: absolute;
    left: 14vw;
    top: 25px;
  }
}
// .outbox::-webkit-scrollbar {
//         display: none !important;
//         width: 0px;
//         height: 0px;
//       }
nav {
  z-index: 1000;
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgba($color: #eee, $alpha: 1);
  padding: 30px 0;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
  .box {
    display: flex;
    flex: 1;
    justify-content: end;
  }

  a {
    display: block;
    display: inline-block;
    text-align: center;
    padding: 0 20px;
    color: black;
    text-decoration: none;

    &.router-link-exact-active {
      color: #2c3e50;
      // background-color: #fff;
    }
  }
  .el-input {
    position: relative;
    margin-left: 350px;
    margin-right: 10px;
    width: 600px;
  }
}
#app {
    height: 100vh;
    width: 100%;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    span {
        width: 10px;
        height: 10px;
        background: #55b9f3;
        border-radius: 50%;
        position: absolute;
        box-shadow: 5px 5px 15px #489dcf, -5px -5px 15px #62d5ff;
        animation: blow 4s linear infinite;
        -webkit-animation: blow 4s linear infinite;
    }
}
/*这里是定义里一个动画效果*/

@keyframes blow {
    0% {
        transform: translate(-50%, -50%);
        /*这里是定义初始透明度为1*/
        opacity: 1;
        /*
	这里是初始滤镜效果
	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。
	值为0deg，则图像无变化。若值未设置，默认值是0deg。
	该值虽然没有最大值，超过360deg的值相当于又绕一圈。
	*/
        filter: hue-rotate(360deg);
        /*这里是浏览器兼容*/
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }

    100% {
	// 2D转化
  // 	这里是从自身向上平移
        transform: translate(-50%, -1000%);
        /*这里是定义结束时透明度为0*/
        opacity: 0;
        /*
	这里是结束滤镜效果
	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。
	值为0deg，则图像无变化。若值未设置，默认值是0deg。
	该值虽然没有最大值，超过360deg的值相当于又绕一圈。
	*/
        filter: hue-rotate(720deg);
        /*这里是浏览器兼容*/
        -webkit-transform: translate(-50%, -1000%);
        -moz-transform: translate(-50%, -1000%);
        -ms-transform: translate(-50%, -1000%);
        -o-transform: translate(-50%, -1000%);
        -webkit-filter: hue-rotate(720deg);
    }
}
.search {
  position: absolute;
  top: 44px;
  right: 68px;
  padding: 20px 0 20px 10px;
  border-bottom: 1px solid #ddd;
  h3 {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }
  ul {
    border-right: 1px solid #409eff;
    border-bottom: 1px solid #409eff;
    border-left: 1px solid #409eff;
    li {
      list-style: none;
      padding: 5px 0;
      width: 539px;
      background-color: #fff;
    }
    li:hover{
      background-color: #409eff;
    }
  }
}
</style>
